<template>
  <section>
    <el-row>
      <!--搜索-->
      <el-col :span="20">
        <el-form :inline="true" size="mini" ref="form">
          <el-form-item label="选择公司：" >
            <el-select v-model="companyId" placeholder="请选择">
              <el-option v-for="company in companies" :key="company.id" :label="company.companyName" :value="company.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择部门：">
            <!--医院列表-选择-->
            <el-select v-model="selDepartment" placeholder="请选择">
              <el-option v-for="department in departments" :key="department.id" :label="department.name" :value="department.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-button @click="newGoods">
        新建商品
      </el-button>
      <el-button @click="loadGoods">
        导入商品
      </el-button>
    </el-row>
    <el-row>

      <el-table :data="goods">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit" size="small" v-model="scope.row.name"></el-input>
            <div>{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="goodsType" label="商品类型" >
          <template slot-scope="scope">
            <el-button @click='creatNumber(scope)' size="small" >
              <icon name="brands/telegram-plane"></icon>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="155">
          <template slot-scope="scope">
            <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope)' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
            <el-button @click='del(scope)' size="small" >DEL</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog :title="curStore?curStore.name:'新建商品' "    :visible.sync="showDialog" >
      <el-row>
        <el-form :inline="true" size="mini">
          <el-form-item label="商品名称：" >
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品类型：" >
            <el-select v-model="goodsTypeId" placeholder="请选择">
              <el-option v-for="goodsType in goodsTypes" :key="goodsType.id" :label="goodsType.name" :value="goodsType.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规格属性：">
            <el-tag :key="specification" v-for="specification in specifications" closable :disable-transitions="false" @close="handleClose(specification)">
              {{specification}}
            </el-tag>
            <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新规格</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table :data="goods">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column v-for="specification in specifications" :label=specification>
            <template slot-scope="scope">
              <el-input v-if="scope.row.edit" size="small" :v-model="scope.row.detail"></el-input>
              <div>{{scope.row.detail}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格">
            <template slot-scope="scope">
              <el-input v-if="scope.row.edit" size="small" v-model="scope.row.price"></el-input>
              <div>{{scope.row.price}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="number" label="商品编号" >
            <template slot-scope="scope">
              <el-input v-if="scope.row.edit" size="small" v-model="scope.row.number"></el-input>
              <div>{{scope.row.number}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="numberBtn" label="生成编号" >
            <template slot-scope="scope">
              <el-button @click='creatNumber(scope)' size="small" >
                <icon name="brands/telegram-plane"></icon>
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="155">
            <template slot-scope="scope">
              <el-button :type="scope.row.edit?'success':'primary'" @click='confirm(scope)' size="small" icon="edit">{{scope.row.edit?'完成':'编辑'}}</el-button>
              <el-button @click='del(scope)' size="small" >DEL</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-button @click="addGoods">新建规格</el-button>
        <el-button @click="confirmGoods">完成</el-button>
      </el-row>
    </el-dialog>

    <el-dialog title="导入挂号商品" :visible.sync="showRegisterDialog">
      <el-form size="medium" style="padding:0 20px;margin:0 auto;" >
        <el-form-item label="选择医院：">
          <!--医院列表-选择-->
          <el-select v-model="selDepartment" placeholder="请选择">
            <el-option v-for="department in departments" :key="department.id" :label="department.name" :value="department.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-table :data="scheduleList" border style="width: 100%">
            <el-table-column type="index">
            </el-table-column>
            <el-table-column label="周次" prop="title" >
            </el-table-column>
            <el-table-column label="开始日期" prop="start" :formatter="formatDate" >
            </el-table-column>
            <el-table-column label="结束日期" prop="end" :formatter="formatDate">
            </el-table-column>
            <el-table-column label="操作"  fixed="right">
              <template slot-scope="scope">
                <el-button :type="scope.row.load?'success':'primary'" @click='confirmLoadRegister(scope)' size="small" icon="edit">{{scope.row.load?'已导':'导入'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </el-dialog>

  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex';
  import DateFormat from '@/common/date-formater'
  import schedule from "../../sdk/api/schedule";
  import department from "../../sdk/api/department";
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "goods",
    data() {
      return {
        showDialog:false,
        showRegisterDialog:false,
        specifications:[],
        scheduleList:null,
        goodsSort:null,
        selStore:null,
        stores:null,
        curStore:null,
        companies:[],
        companyId:null,
        selDepartment:null,
        departments:[],
        goods:[],
        goodsTypeId:null,
        goodsTypes:[],
        inputVisible: false,
        inputValue: ''
      }
    },
    created(){
      //加载公司列表，用来选择
      this.loadCompanyList()
      this.loadGoodsTypes()
    },
    watch:{
      companyId(nv,ov){
        if(nv){
          this.loadDepartments(nv)//加载该公司下部门
        }
      },
      selDepartment(nv,ov){//选择完部门后，加载并显示该部门下的商品列表
        this.loadGoods(nv)
        this.loadScheduleList(nv)//加载排班列表
      }
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      loadGoodsTypes(){
        // getGoodsTypeList
        this.fetch({name:"getGoodsTypeList"})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.goodsTypes = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      handleClose(tag) {
        this.specifications.splice(this.specifications.indexOf(tag), 1)
      },
      showInput() {
        this.inputVisible = true
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus()
        });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue
        if (inputValue) {
          this.specifications.push(inputValue)
          console.log(this.specifications)
        }
        this.inputVisible = false
        this.inputValue = ''
      },
      loadGoods(departmentId){
        this.fetch({name:"getGoodsList",data:{departmentId}})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.goods = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      loadCompanyList(){
        //加载公司列表
        this.fetch({name:"getCompanyList"})
          .then((res)=>{
            if(res.errCode){
              this.$message({type:'info',message:res.errMsg})
            }else{
              console.log(res)
              this.companies = res
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      loadDepartments(companyId){
        console.log(companyId)
        this.fetch({name:"getDepartmentList",data:{companyId}})
          .then(res=>{
            if(res.errCode){
              this.$message({type:'error',message:res.errMsg})
            }else{
              console.log(res)
              this.departments=res
            }
          })
          .catch(err=>{
            console.log(err)
            this.$message({type:'error',message:'服务器错误'})
          })
      },
      formatDate(row, column, cellValue, index){
        return DateFormat.format(cellValue)
      },
      loadHospitals(){
        this.fetch({name: "getHospitalList"})
          .then((res) => {
            if (res.errCode) {
              this.$message({type: 'info', message: res.errMsg})
            } else {
              this.hospitals = res
            }
          })
          .catch((err) => {
            console.log(err)
            this.$message({type: 'error', message: "服务器错误"})
          })
      },//加载医院列表
      loadScheduleList(nv){
        console.log(nv)
        this.fetch({name: "getScheduleList",data:{departmentId:nv}})
          .then((res) => {
            if (res.errCode) {
              this.$message({type: 'info', message: res.errMsg})
            } else {
              this.scheduleList=res.content
              console.log(this.scheduleList)
            }
          })
          .catch((err) => {
            console.log(err)
            this.$message({type: 'error', message: "服务器错误"})
          })
      },//加载医院下排班列表
      newGoods(){
        this.showDialog=true
      },//新建新商品
      loadGoods(){
        // this.showRegisterDialog=true
      },
      confirmLoadRegister(scope){
        console.log(scope)
        this.showDialog=true
        this.goodsSort ='挂号'
        this.goods= scope.row.scheduleItems
        for(let i=0;i<this.goods.length;i++){
          let j=this.goods[i]
          console.log(j)
          j.specification=[j.date,j.time,j.section.name,j.doctorName]
          j.price=j.section.basePrice
        }
        console.log(this.goods)
      },//确认导入挂号商品
      handleSelectionChange(){
      }, //控制选项
      addGoods(){
        console.log(this.goods)
        let goods = {specification:'',edit:true}
        this.goods.push(goods)
      },//增加商品
      creatNumber(scope){

      },//生成商品编码
      confirm(scope){
        if(scope.row.edit && scope.row.edit === true){//目前是编辑状态
          //判断是否新创建
          if(scope.row.id){//非新建，有id，要更新
            // this.updateSection(row)
            console.log('要更新')
          }
          else {//新建的，有edit
            //保存新
            console.log('保存新')
            // this.saveSection(row)
            // row.edit = !row.edit
          }
        }else {
          console.log('点之前非编辑，改成编辑')
          //点击之前是非编辑状态，改成编辑状态
          if(scope.row.edit === undefined){
            Vue.set(scope.row,'edit',true)//后续添加属性，需要vue联动
          }else {
            scope.row.edit = true
          }
        }
      },//编辑or确认商品
      confirmGoods(){
        //确认新建商品'goodsTypeId','name','departmentId','skus'
        console.log(this.goodsTypeId)

        // this.fetch({name: "createGoods",data:{departmentId:nv}})
        //   .then((res) => {
        //     if (res.errCode) {
        //       this.$message({type: 'info', message: res.errMsg})
        //     } else {
        //       this.scheduleList=res.content
        //       console.log(this.scheduleList)
        //     }
        //   })
        //   .catch((err) => {
        //     console.log(err)
        //     this.$message({type: 'error', message: "服务器错误"})
        //   })
      }
    }
  }
</script>

<style scoped>

</style>
